1.變數不影響他人的方式(合作時要用)

(1)把自己的計劃包起來，變數執行完之後就捨棄
IIFE = Immediately Invoked Function Expression

      (function () {
        //var showMsg_v3 = 刪除
        console.log("狗溝~~~~");
      })();

(2)或是把自己的計劃打包起來，包在function裡面(設計閉包)

        function boss(){
           // 讓function擁有自己的變數
            var hp = 100;

            function hit(){
                // 若有 "其他" function還會使用
                // 變數不會消失 可以持續-1
                hp = hp - 1;
                console.log(`boss hp: ${hp}`);  //boss hp: 99
            }
              return hit;                     
        }

        var game = boss();
        game(); //99
        game(); //98

2.() 是去執行

checkLength()

3.this代表什麼值，取決於你在哪裡使用它

(1)會把this跟butten包起來一起送出去 成為butten

    <button onclick="btnClick(this)">測試</button>

      function btnClick(bunny) {
        console.log(bunny); 
      }

(2)this單獨存在就是window

      console.log(this); // window 物件
      console.log(window === this); //true

(3)this在物件裡是物件

        var s1 = {
        html: 100,
        css: 90,
        getTotal: function () {
          //不能改成=>函式，this 已經是另一個世界(window)不適用正常code
          return this.html + this.css; //this 沒有this會變成抓變數
        },
      };
      var temp = s1.getTotal(); //190
      console.log(temp);

(4)function內的function

    var num = 123456789;
        function test2() {
            var num = 10;

            function showNum() {   //只是宣告
                console.log(`20. A. num ==> ${this.num}`); //123456789 衝出去找= =?
                console.log(`20. B. num ==> ${num}`); //10 抓最近的
            }
            showNum(); //執行
        }
        test2();

5.物件裡面的屬性 this

       function Student(sname, sage) {
        // Student = {x:y}
        this.StudentName = sname; //this S = x
        this.StudentAge = sage; //this S = y

        this.cat = function () {
          console.log("喵");
          console.log(this.StudentName); //物件裡面的屬性 this
        };
      }

      var s2 = new Student("No2", 90); //new O
      console.log(s2.StudentName); // cat
      s2.cat(); //"喵"
      console.log("\n\n");

更新:Jq

6.在 ＜h3＞，$("").each(function (index(第幾個?), element(是誰?))
element(變數;是內容) == this

先自己做物件

          <h3>apple</h3>
          <h3>bee</h3>
          <h3 id="cat_1">cat</h3>

拿取
element(變數;是元素) == this

        $("h3").each(function (index, element) {
          //<h3>apple</h3> <h3>bee</h3> <h3>cat</h3>=console.log(this);
          console.log(element);
          console.log(element == this);  //true
          // 4 種  // apple bee cat
          console.log($(element).text());
          console.log($(this).text());
          console.log(element.innerText);
          console.log(this.innerText);

          // 將所有 h3 元素的文字改為斜體
          $(this).html(`<i>${$(this).text()}</i>`);
        });

         $('#bagTop>img').on('click', function () {
         console.log(this) //<img id="kutar" src="../_img/kutar3.png" />
         $(this).hide(); // => display:none
         })

7.在[]，$.each(list, function (index, item)內
this = string

給變數，套用Jq function

        var list = ["dog", "egg"];
        // indexInArray: number, valueOfElement: T
        $.each(list, function (index, item) {
          console.log("--開始--");
          console.log(index); // 0 1 (第幾個)
          console.log(item); // dog egg(誰?)
          console.log(this); //string
          console.log("--結束--");
        });

4.執行function的方式

(1) addEventListener click

        document.getElementById("btnLogin").("click", checkLength);
        //等同
        btnLogin.addEventListener("click", checkLength);

(2) onclick=

  <button onclick="checkLength();checkNumber();" id="btnLogin">登入</button>

(3)

      btnLogin.onclick = checkLength;
      btnLogin.onclick = checkNumber; //會後蓋前

      解法:
         btnLogin.onclick = function(){
               checkLength();
               checkNumber();
           }

(4) .on("click", function (){}) (點擊，事件監聽)

        $("#btnZoomin").on("click", function () {
          $("p").css("font-size", "30px");
        });

5.找event

    <input onkeypress="checkInput(event)" type="text" />

      function checkInput(e) {
        //event
        demo.innerText = e; //[object KeyboardEvent]
        console.log(e); //這是啥? 可以看看[object KeyboardEvent]內的東西 有很多
        // 那我只印出這些來看看就好
       demo.innerText = `charCode:${e.charCode}
            code: ${e.code}
            key: ${e.key}
            keyCode: ${e.keyCode}
            `;

6. 注意型別

parseInt
+變數
都可以強制轉型變數為數字

7. this va event

this 抓本身元素

    <button class="moneyBtn" id="USD" onclick="changeMoney(this)">美金</button>
    
    function changeMoney(ele) {
       // 1. html btn 抓本身元素 id
        console.log(ele.id);
    }

event 綁事件 + target

 <button class="moneyBtn" id="TRY" onclick="testEvent(event)">里拉</button>
 
      function testEvent(e){
      console.log(e.target.innerText);
      }

8. for迴圈可放多個變數

function showbottomTop() {
    // for 可使用數個變數
    // 中間判斷迴圈幾次
    for (let i = 0, j = 0; i < 6; i += 2, j++) {
       datString += `  
        <tr>
          <td>風向 ${bottomResult(13)[4 + i]}</td>
          <td>風向 ${bottomResult(13)[5 + i]}</td>
        </tr>
        <tr>
          <td colspan="2">紫外線 ${bottomResult(9)[0 + j]}</td>
        </tr>
        `;
    }
    dayTableTop.innerHTML = datString;
  }